<template>
  <div class="tag-page">
    <h2>dataV组件</h2>
    <div class="box-border">
      <dv-border-box-10>dv-border-box-10hhhhhhhhhhhhhhhh</dv-border-box-10>
    </div>
    <div class="box-border2">
      <dv-border-box-11 title="dv-border-box-11" />
    </div>
    <div class="box-border3">
      <dv-border-box-10>dv-border-box-10</dv-border-box-10>
    </div>
    <div class="list body-box">
      <h2>排名轮播表</h2>
      <dv-scroll-ranking-board class="dv-cap-chart" :config="config1" style="width:500px;height:300px" />
    </div>
    <div>
      <h2>胶囊柱图</h2>
      <dv-capsule-chart :config="config2" style="width:300px;height:200px" />
    </div>
    <button @click="onClick">点击按钮</button>
  </div>
</template>
<script>
export default {
  name: 'TagPage',
  data() {
    return {
      config1: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      },
      config2: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true
      }
    }
  },
  methods: {
    onClick() {
      alert('点击了我')
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-page {
 width: 100%;
 height: 100%;
 .box-border {
     width: 300px;
     height: 300px;
 }
 .box-border2 {
     width: 100%;
     height: 500px;
 }
 .box-border3 {
     width: 300px;
     height: 500px;
 }
//  .list {
//      width: 300px;
//      height: 150px;
//  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-cap-chart {
      width: 100%;
      height: 160px;
    }
  }
}
</style>
